<template>
    <div class="open_box">
        <div class="dati_box">
            <div class="timex">
                <div class="pages_box">
                    <span>{{ page + 1 }}</span>/{{ dtexam.length }}
                </div>
                <div class="block_img">
                    <img src="@/assets/times.svg" alt="">
                    <span>{{ second }}</span>
                </div>
            </div>
            <div v-for="(item, index) in dtexam" :key="index" v-show="page == index">
                <div class="text_exam">
                    <p>
                        <span>{{ item.type == 1 ? "【单选题】" : "【多选题】" }}</span>
                        {{ item.title }}
                    </p>
                </div>
                <div v-for="(ite, ind) in item.option">
                    <div class="_A" @click="questanswer(ind)" :class="activeobj(ind)">

                        <div class="span">
                            {{ String.fromCharCode(65 + ind) }}
                        </div>
                        <div>
                            {{ ite
                            }}
                        </div>
                    </div>
                </div>
                <h2 class="flags" v-show="shoes">答错了~</h2>
                <h2 class="fla" v-show="shoe">答对了~</h2>
                <h3 class="aa" v-show="shoes">正确答案：{{ item.answer }}</h3>
            </div>
            <div class="sxqh">
                <div class="navexam" style="cursor: pointer;" @click="tosubmit" v-if="page > 0">
                    <button>上一题</button>
                </div>
                <div class='zhanwi' v-else></div>
                <div class="goexam" style="cursor: pointer;" @click="submit">
                    <button>{{ sub }}</button>
                </div>
            </div>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router'
import { practice_exam, practice_submit } from '@/api/team'
import { ref, onMounted, computed, onBeforeUnmount } from 'vue';
let Router = useRouter()
let Route = useRoute()
let sub = ref('提交')
console.log(Route.query, 'lianquery')
let dtexam: any = ref<any>([])
let second = ref()
let data = ref({
    practice_id: Route.query.id
})
let page: any = ref(0)
let shoe = ref(false)
let shoes = ref(false)

let wdanswer: any = ref()
let anserPages: any = ref<any>([])
let iddd = ref()
const activeobj = (ind: any) => {
    ind = String.fromCharCode(65 + ind)
    let { answer } = dtexam.value[page.value]

    const len: number = wdanswer.value[page.value].length
    if (len === 0) return {}

    if (sub.value == '提交') {
        return wdanswer.value[page.value].includes(ind) ? 'activeC' : ''
    }

    const isActive = wdanswer.value[page.value].includes(ind)

    // console.log(answer, isActive, '555555555555555555555555')
    if (isActive) {
        let obj: any
        const isB: boolean = wdanswer.value[page.value].join('') === answer
        obj = {
            activeB: isB,
            activeA: !isB
        }
        shoe.value = isB
        shoes.value = !isB
        return obj;
    }
    return {}
}
const practiceexam = () => {
    practice_exam(data.value).then(res => {
        dtexam.value = res.data.data.question
        second.value = res.data.data.seconds
        iddd.value = res.data.data.record_id
        console.log(iddd.value, '练习id')
        let daanlen = dtexam.value.length
        wdanswer.value = new Array(daanlen)
        for (let i = 0; i < daanlen; i++) {
            wdanswer.value[i] = [];
        }
        // console.log(wdanswer.value, '11111111111111111111111')
    })
}
practiceexam()
const questanswer = (index: any) => {
    const { type } = dtexam.value[page.value];
    // console.log(type, 'danyuen2222')
    const id = String.fromCharCode(65 + index)
    let currAns = wdanswer.value[page.value]
    if (anserPages.value.includes(page.value)) return
    if (type === 1) {
        // if (sub.value == '下一题') {
        // if (currAns.length > 0)
        // return
        // }
        currAns = [id]
    } else {
        const isFind = currAns.includes(id)
        if (isFind) {
            const i = currAns.findIndex((item: any) => {
                return item == id
            })
            currAns.splice(i, 1)
        } else {
            currAns.push(id)
            currAns = currAns.sort()
        }
    }
    wdanswer.value[page.value] = currAns
}
const submit = () => {
    // Router.push('/home/examresult')
    if (sub.value == '提交') {
        if (page.value < dtexam.value.length - 1) {
            anserPages.value.push(page.value)
            console.log(anserPages.value, '页数')
            sub.value = '下一题'
        } else {
            sub.value = '完成'
        }
    } else if (sub.value == '下一题') {
        if (page.value < dtexam.value.length - 1) {
            shoe.value = false
            shoes.value = false
            page.value++;
            if (!anserPages.value.includes(page.value))
                sub.value = '提交'
        } else {
            sub.value = '完成'
        }
    } else {
        console.log(wdanswer.value, '答案')
        const combinedArray = Object.values(wdanswer.value).map((arr: any) => arr.join(''))
        let daan = combinedArray.join(',')
        console.log(daan, 'iddd')
        let data = {
            record_id: iddd.value,
            result: daan
        }
        clearInterval(timer);
        practice_submit(data).then(res => {
            let chuan = res.data.data
            console.log(res.data.data, 'result')
            let arr = JSON.stringify(chuan)
            console.log(arr)
            Router.push({ path: '/home/lianresult', query: { chuan: arr } })
        })
    }
}
const subss = () => {
    let aa = wdanswer.value[page.value].length
    console.log(aa, '提交')
    if (dtexam.length - 1 == page) {
        sub.value = '完成'; // 设置按钮文字为“提交并下一题”
    } else if (aa > 1) {
        sub.value = '提交'; // 设置按钮文字为“提交”
    } else {
        sub.value = '下一题'
    }
    // 处理提交逻辑
    // ...
}
// subss()
let timer: number
const times = () => {
    timer = setInterval(async () => {
        second.value--;
        if (second.value <= 0) {
            clearInterval(timer);
            // this.convertToLetters()
            const combinedArray = Object.values(wdanswer.value).map((arr: any) => arr.join(''))
            let daan = combinedArray.join(',')
            console.log(daan, 'iddd')
            let data = {
                record_id: iddd.value,
                result: daan
            }
            practice_submit(data).then(res => {
                let chuan = res.data.data
                console.log(res.data.data, 'result')
                let arr = JSON.stringify(chuan)
                console.log(arr)
                Router.push({ path: '/home/lianresult', query: { chuan: arr } })
            })
        }
    }, 1000); // 每秒钟执行一次
}
times()
const tosubmit = () => {
    // Router.push('/home/examresult')
    page.value--
    sub.value = '下一题'
    // activeobj()
}
onBeforeUnmount(() => {
    clearInterval(timer);
});
</script>

<style lang="scss" scoped>
.navexam {

    button {
        width: 240px;
        height: 60px;
        background: #e020202a;
        color: #E02020;
        font-size: 24px;
        border-radius: 35px;
        border: none;

    }
}

.goexam {

    button {
        width: 240px;
        height: 60px;
        background: #E02020;
        color: #fff;
        font-size: 24px;
        border-radius: 35px;
        border: none;
        font-size: 24px;

    }
}

.flags {
    margin: 30px 15px;
    color: #FF4F4F;
}

.aa {
    margin: 10px 15px;
}

._A {
    display: flex;
    // line-height: 50px;
    padding: 10px;
    background: #f9f9f9;
    border: solid 1px transparent;
    border-radius: 25px;
    margin-top: 30px;
    color: #999999;
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;

    .span {
        display: inline-block;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        border-radius: 50%;
        margin-right: 10px;
        margin-left: 10px;
        color: #999999;
        font-size: 18px;
    }

}

.activeC {
    border: solid 1px #E02020;
}

.text_exam {
    font-size: 18px;
    margin: 20px 10px;
    line-height: 35px;

    span {
        color: #FF4F4F;
    }
}

.timex {
    display: flex;
    justify-content: space-between;

    .pages_box {
        width: 72px;
        height: 30px;
        background: #FFDFDF;
        color: #FF4F4F;
        text-align: center;
        line-height: 30px;
        font-weight: 700;
        border-radius: 5px;
        margin: 10px;

        span {
            font-size: 16px;
        }
    }

    .block_img {
        width: 100px;
        height: 30px;
        line-height: 30px;
        margin: 10px;
        text-align: center;

        img {
            width: 18px;
            height: 18px;
            margin-right: 6px;
        }

        span {
            font-size: 16px;
        }
    }
}

.open_box {
    width: 98%;
    margin-left: 1%;
    background: #fff;
}

.dati_box {
    width: 70%;
    padding: 67px 15%;
}

.activeA {
    background: #FFF4F4;

    span {
        background: #E02020;
        color: #fff;
    }
}

.activeB {
    background: #17a41028;

    span {
        background: #17A410;
        color: #fff;
    }
}

.fla {
    margin: 30px 15px;
    color: #17A410;
}

// @media (min-width: 2160px) {
//     .open_box {
//         width: 100%;
//         margin: 0 auto;
//         background-color: #fff;
//     }
// }

// @media (max-width: 2159px) {
.sxqh {
    display: flex;
    justify-content: space-between;
    margin-top: 100px;
}

.open_box {
    width: 1080px;
    margin: 0 auto;
    background-color: #fff;
}

.zhanwi {
    width: 240px;
    height: 60px;
}
</style>